<template>
  <a-modal
    title="人员选择"
    width="70%"
    :maskClosable="false"
    cancelText="取消"
    :visible="dialog.show"
    @cancel="allEvents('cancel')"
    :footer="null"
  >
    <div class="personnel">
      <a-row :gutter="10">
        <a-col :xl="6" :lg="6" :md="24">
          <a-card title="组织机构">
            <a-tree
              ref="treeDatas"
              v-if="treeData.length > 0"
              :tree-data="treeData"
              :replaceFields="treeFields"
              :defaultExpandedKeys="[treeData[0].id]"
              :selected-keys="[formCodition.parentId]"
              show-line
              @select="onSelect"
            >
              <template slot="nodes" slot-scope="item">
                {{ item.title }}
              </template>
            </a-tree>
          </a-card>
        </a-col>
        <a-col :xl="18" :lg="18" :md="24">
          <a-card>
            <div class="table-page-search-wrapper">
              <a-form-model ref="formCodition" layout="inline" :model="formCodition">
                <a-row :gutter="48">
                  <a-col :xl="24" :lg="24" :md="24">
                    <a-form-model-item label="类型" prop="personType">
                      <a-radio-group
                        name="radioGroup"
                        :default-value="0"
                        v-model="formCodition.personType"
                        @change="allEvents('search')"
                      >
                        <a-radio :value="0"> 内部人员 </a-radio>
                        <a-radio :value="1"> 外部人员 </a-radio>
                      </a-radio-group>
                    </a-form-model-item>
                  </a-col>
                  <a-col :xl="7" :lg="12" :md="24">
                    <a-form-model-item label="姓名" prop="personName">
                      <a-input v-model="formCodition.personName" placeholder="请输入姓名" :maxLength="50" allowClear />
                    </a-form-model-item>
                  </a-col>
                  <a-col :xl="7" :lg="12" :md="24">
                    <a-form-model-item label="联系方式" prop="phone">
                      <a-input v-model="formCodition.phone" placeholder="请输入联系方式" :maxLength="50" allowClear />
                    </a-form-model-item>
                  </a-col>
                  <a-col :xl="10" :lg="24" :md="24" class="topBtn">
                    <a-form-model-item>
                      <span>
                        <a-button type="primary" @click="allEvents('search')">查询</a-button>
                        <a-button style="margin-left: 8px" @click="allEvents('reset')">重置</a-button>
                      </span>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-form-model>
            </div>
            <s-table ref="table" :columns="tables.columns" :data="tables.loadData">
              <template slot="status" slot-scope="text, record">
                <a-switch :checked="record.dataState == 0" @change="allEvents('status', $event, record)" />
              </template>
              <template slot="action" slot-scope="text, record">
                <a class="add" @click="allEvents('look', record)">查看</a>
                <a-divider type="vertical" />
                <a class="other" @click="allEvents('delete', record)">下载简历</a>
              </template>
            </s-table>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </a-modal>
</template>

<script>
import { personnelList } from '@/api/system/personnel'
import { organizationTreeNot } from '@/api/system/organization'

export default {
  name: 'personnel',
  components: {},
  data() {
    return {
      treeData: [],
      treeFields: {
        children: 'children',
        title: 'title',
        key: 'id',
      },
      formCodition: {
        parentId: '0',
        personType: 0,
        personName: '',
        phone: '',
      },
      tables: {
        columns: [
          {
            title: '序号',
            fixed: 'left',
            ellipsis: true,
            width: 61,
            customRender: (text, record, index) => `${index + 1}`,
          },
          {
            title: '所属组织机构',
            dataIndex: 'deptName',
            ellipsis: true,
            width: 150,
          },
          {
            title: '姓名',
            dataIndex: 'personName',
            ellipsis: true,
            width: 150,
          },
          {
            title: '性别',
            dataIndex: 'sexName',
            ellipsis: true,
            width: 150,
          },
          {
            title: '出生地',
            dataIndex: 'birthPlace',
            ellipsis: true,
            width: 150,
          },
          {
            title: '民族',
            dataIndex: 'nation',
            ellipsis: true,
            width: 150,
          },
          {
            title: '出生日期',
            dataIndex: 'birthDay',
            ellipsis: true,
            width: 150,
          },
          {
            title: '参加工作时间',
            dataIndex: 'workTime',
            ellipsis: true,
            width: 150,
          },
          {
            title: '学历',
            dataIndex: 'educationName',
            ellipsis: true,
            width: 150,
          },
          {
            title: '毕业院校及专业',
            dataIndex: 'graduateSchoolMajor',
            ellipsis: true,
            width: 150,
          },
          {
            title: '项目管理年限',
            dataIndex: 'workingYears',
            ellipsis: true,
            width: 150,
          },
          {
            title: '技术职称',
            dataIndex: 'technicalTitle',
            ellipsis: true,
            width: 150,
          },
          {
            title: '联系方式',
            dataIndex: 'phone',
            ellipsis: true,
            width: 150,
          },
          {
            title: '邮箱',
            dataIndex: 'email',
            ellipsis: true,
            width: 150,
          },
          {
            title: '操作',
            dataIndex: 'action',
            fixed: 'right',
            width: 135,
            scopedSlots: {
              customRender: 'action',
            },
          },
        ],
        loadData: (parameter) => {
          const params = Object.assign({}, parameter, this.formCodition)
          return personnelList(params).then((res) => {
            return res
          })
        },
      },

      dialog: {
        show: false,
      },
    }
  },
  mounted() {
    this.getTree()
  },
  methods: {
    onSelect(selectedKeys, info) {
      this.formCodition.parentId = selectedKeys[0]
      this.$refs.table.refresh(true)
    },
    showDialog() {
      this.dialog.show = true
    },
    allEvents(type, param, param1) {
      switch (type) {
        case 'search':
          this.$refs.table.refresh(true)
          break
        case 'reset':
          this.$refs.formCodition.resetFields()
          this.$refs.table.refresh(true)
          break
        case 'look':
          break
        case 'cancel':
          this.dialog.show = false
          break
      }
    },
    getTree() {
      organizationTreeNot().then((res) => {
        this.treeData = res.children
      })
    },
  },
}
</script>

<style lang="less" scoped>
</style>